import { Avatar, Col, List } from "antd";
import { UserOutlined } from "@ant-design/icons";
import { Link } from "react-router-dom";
import TopicTag from "./topicTag";
import FromNow from "./fromnow";

function TopicsList(props) {
    let { loading, data } = props;
    return (
        <List
            className="topic_list"
            loading={loading}
            dataSource={data}
            renderItem={(data) => {
                return (
                    <List.Item>
                        <Col xs={24} md={20}>
                            <Link to={`/user/${data.author.loginname}`}>
                                <Avatar
                                    icon={<UserOutlined />}
                                    src={data.author.avatar_url}
                                />
                            </Link>
                            <TopicTag
                                tab={
                                    data.top
                                        ? "top"
                                        : data.good
                                        ? "good"
                                        : data.tab
                                }
                            />
                            <Link to={`/topics/${data.id}`}>{data.title}</Link>
                        </Col>
                        <Col xs={0} md={4} className="topic-time">
                            <FromNow date={data.last_reply_at} />
                        </Col>
                    </List.Item>
                );
            }}
        ></List>
    );
}

export default TopicsList;
